<template>
  <el-main>
    <el-header> 商品管理 </el-header>
    <div style="margin: 0.5rem">🙉</div>
    <el-tabs type="card" @tab-click="handleClick">
      <el-tab-pane label="添加商品"><goods-add :sum="sum" /></el-tab-pane>
      <el-tab-pane label="已上架商品"><goods-put :sum="sum" /></el-tab-pane>
      <el-tab-pane label="已下架商品"><goods-shelf :sum="sum" /></el-tab-pane>
    </el-tabs>
  </el-main>
</template>
<script>
import { ref } from "@vue/reactivity";
import goodsAdd from "./goodsAdd.vue";
import goodsPut from "./goodsPut.vue";
import goodsShelf from "./goodsShelf.vue";
export default {
  components: {
    goodsAdd,
    goodsPut,
    goodsShelf,
  },
  setup() {
    const sum = ref(0);
    const handleClick = () => {
      sum.value++;
    };
    return {
      handleClick,
      sum,
    };
  },
};
</script>
<style scoped>
.el-main {
  background-color: #fff;
  min-height: 100vh;
}
.el-header {
  margin-bottom: 0.5rem;
  background-color: #fff;
  padding: 1rem;
  font-size: 2rem;
  font-weight: 900;
}
</style>
